<template>
  <div class="wrapper" @click="click">
    <div class="content">
      <i class="fa fa-arrows-alt"/><span class="screenfull-text">全屏显示</span>
    </div>
  </div>
</template>
<script lang="ts">
import {Component, Vue} from 'vue-property-decorator';
import screenfull from 'screenfull';

@Component
export default class Screenfull extends Vue {
  private isFullscreen = false;

  click() {
    if (!screenfull.isEnabled) {
      this.$message({
        message: '您的浏览器无法进入全屏模式',
        type: 'warning'
      });
      return false
    }
    screenfull.toggle()
  }

  change() {
    this.isFullscreen = (screenfull as any).isFullscreen;
  }

  init() {
    if (screenfull.isEnabled) {
      screenfull.on('change', this.change)
    }
  }

  destroy() {
    if (screenfull.isEnabled) {
      screenfull.off('change', this.change)
    }
  }

  mounted() {
    this.init()
  }

  beforeDestroy() {
    this.destroy()
  }
}
</script>

<style scoped lang="scss">
.wrapper {
  color: #ffffff;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 5px;
  cursor: pointer;

  .content {
    .screenfull-text {
      margin-left: 3px;
    }
  }

  &:hover {
    background-color: rgba(0, 0, 0, .1);
  }
}
</style>

